<template>
	<view class="list" v-show="isloading">
		<view class="music-list" :style=" bgimage "></view>
		<music-head title="歌曲" :isShow='true' color='white'></music-head>
		<view class="list-container">
			<scroll-view scroll-y="true">
					<view class="info-content">
						<view class="list-info-image">
							<image v-if="listInfo.coverImgUrl" :src="listInfo.coverImgUrl"></image>
							<view class="iconfont icon-yousanjiao people-num">{{ listInfo.playCount | transformNumber}}</view>
						</view>
						<view class="list-info-text">
							<view class="text-title">{{ listInfo.name }}</view>
							<view class="text-image">
								<image src="../../static/网易云.png"></image>
								<text>网易云音乐</text>
							</view>
							<view class="text-content">{{ listInfo.description }}</view>
						</view>
					</view>
					
					<!-- 分享 -->
					<!-- #ifdef MP-WEIXIN -->
					<view class="share-content">
						<button open-type="share" class="iconfont icon-fenxiang">
							<text class="share-text">分享给微信好友</text>
						</button> 
					</view>
					<!-- #endif -->
					
					<!-- 播放列表 -->
					<view class="play-content">
						<!-- 全部播放按钮 -->
						<view class="play-all">
							<view class="iconfont icon-bofang paly-icon"></view>
							<view class="icon-text">播放全部</view>
							<view class="paly-num">(共{{listNumber}}首)</view>
						</view>
						<view class="paly-list">
							<view class="play-music-item" v-for="(item,index) in listMusic" :key="item.id" @tap="handleToDetail(item.id)">
								<view class="paly-music-index"><view>{{index + 1}}</view></view>
								<view class="paly-music-content">
									<view class="music-title">{{ item.name }}</view>
									<view class="music-singer">
										<view class="music-type">
											<image v-if=" privileges[index].maxbr == 999000" src="../../static/sq.png"></image>
											<image v-if=" privileges[index].fee == 1" src="../../static/试听.png"></image>
											<image v-if=" privileges[index].fee == 1" src="../../static/vip.png"></image>
										</view>
										<view class="singer-name">
											{{item.ar[0].name}} - {{ item.name }}
										</view>
									</view>
								</view>
								<view class="iconfont icon-24gl-playCircle paly-item-icon">
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
		</view>	
	</view>
</template>

<script>
	import { playlistInfo } from '../../common/api.js';
	export default {
		data() {
			return {
				listMusic:[], //总歌单
				listInfo: {},  //歌单名称
				listNumber: 0,  //歌曲总数
				privileges: [],  //权限
				isloading: false
			};
		},
		onLoad(option){
			uni.showLoading({
			    title: '加载中'
			});
			playlistInfo(option.listId).then((res)=>{
				this.listInfo = res.playlist
				this.listMusic = this.listInfo.tracks
				this.$store.commit('INIT_TOPLISTIDS',this.listInfo.trackIds)
				this.listNumber = this.listMusic.length
				this.privileges = res.privileges
				this.isloading = true
				setTimeout(function () {
				    uni.hideLoading();
				}, 200);
			})
		},
		computed: {
			bgimage(){
				return {
					'background-image' : `url(${this.listInfo.coverImgUrl})`
				}
			}
		},
		methods:{
			handleToDetail(id){
				uni.navigateTo({
					url: "../detail/detail?detailId=" + id
				})
			}
		}
	}
</script>

<style lang="scss">
	//整体
	.list{
		position: relative;
		width: 100%;
		height: 100vh;
	}
	.music-list{
		width: 100%;
		height: 100vh;
		overflow: hidden;
		position: absolute;
		top: 0rpx;
		left: 0rpx;
		background-image: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fnimg.ws.126.net%2F%3Furl%3Dhttp%253A%252F%252Fdingyue.ws.126.net%252F2021%252F0820%252Fd7404576j00qy49wm002ec000hs00u8g.jpg%26thumbnail%3D650x2147483647%26quality%3D80%26type%3Djpg&refer=http%3A%2F%2Fnimg.ws.126.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634996792&t=3845f771b238a74f33128a9e1eba48b4);
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center 0;
		filter: blur(15px);
	}
	 .list-container{
		 width: 100%;
		 height: calc(100vh - 75px);
		 overflow: hidden;
		 
		 scroll-view{
			 height: 100%;
		 }
	 }
	 //信息头部
	.info-content{
		width: 100%;
		height: 265rpx;
		display: flex;
		align-items: center;
		
		.list-info-image{
			width: 261rpx;
			height: 261rpx;
			position: relative;
			margin: 30rpx;
			
			image{
				width: 100%;
				height: 100%;
				border-radius: 25rpx;
			}
			
			.people-num{
				position: absolute;
				right: 15rpx;
				top: 0rpx;
				font-size: 31rpx;
				color: white;
			}
		}
		
		.list-info-text{
			width: 390rpx;
			height: 100%;
			display: flex;
			flex-direction: column;
			
			.text-title{
				font-size: 37rpx;
				color: white;
			}
			
			.text-image{
				width: 100%;
				height: 65rpx;
				margin: 20rpx 0px;
				display: flex;
				align-items: center;
				image{
					width: 50rpx;
					height: 50rpx;
					margin-right: 16rpx;
					border-radius: 50%;
				}
				text{
					font-size: 30rpx;
					color: white;
				}
			}
			
			.text-content{
				color: rgb(184, 206, 232);
				font-size: 25rpx;
			}
		}
	}
	
	//分享部分
	.share-content{
		width: 332rpx;
		height: 70rpx;
		margin: 40rpx auto;
		
		button{
			background-color: rgba(0,0,0,0.4);
			border-radius: 35rpx;
		}
		
		.icon-fenxiang{
			color: rgb(241, 248, 250);
		}
		.share-text{
			color: rgb(241, 248, 250);
			margin: 10rpx;
		}
	}
	
	//歌曲列表部分
	.play-content{
		width: 100%;
		border-top-left-radius: 40rpx;
		border-top-right-radius: 40rpx;
		background-color: white;
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
	}
	.play-all{
		width: 100%;
		height: 111rpx;
		display: flex;
		align-items: center;
		.paly-icon{
			font-size: 39rpx;
			margin: 30rpx;
		}
		.icon-text{
			font-size: 37rpx;
		}
		.play-num{
			font-size: 28rpx;
			color: rgb(168, 168, 168);
		}
	}
	//播放列表
	.paly-list{
		width: 100%;
		display: flex;
		flex-direction: column;
		.play-music-item{
			width: 100%;
			display: flex;
			align-items: center;
			height: 111rpx;
			position: relative;
			
			.paly-music-index{
				width: 100rpx;
				height: 100rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				
			}
			
			.paly-music-content{
				display: flex;
				flex-direction: column;
				
				.music-title{
					font-size: 32rpx;
					margin-bottom: 10rpx;
					width: 570rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				
				.music-singer{
					display: flex;
					align-items: center;
					
					.music-type{
						background-color: black;
						line-height: 22rpx;
						flex-shrink: 0;
						display: flex;
						align-items: center;
						margin-right: 10rpx;
						image{
							width: 33rpx;
							height: 22rpx;
						}
					}
					.singer-name{
						font-size: 23rpx;
						color: rgb(168, 168, 168);
						width: 500rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}
			}
			
			.paly-item-icon{
				position: absolute;
				right: 30rpx;
				top: 50%;
				transform: translateY(-50%);
				font-size: 48rpx;
			}
		}
		
	}
</style>
